<template>
  <div class="order">
    <div class="van-nav-bar">
      <div class="van-nav-bar-left"
           @click="back ">
        <van-icon size="16"
                  name="arrow-left"
                  color="#FFF" />返回
      </div>
      <div class="van-nav-bar-title">订单结算</div>
    </div>

    <!-- 地址--订单内容 -->

    <div class="max">

      <div class="address">

        <div class="select-address">
          <div class="SelectAddress"
               @click="selectAddress">选择地址</div>
          <div class="arrow">
            <van-icon name="arrow" />
          </div>
        </div>

        <div class="userin-box">
          <div class="userin">
            <div class="username">{{userSelectAddress.name}}</div>
            <div class="TelephoneNo">{{userSelectAddress.tel}}</div>

            <div v-show="userSelectAddress.isDefault">
              <van-tag round
                       type="primary"
                       color="#0C34BA"
                       size="32">默认</van-tag>
            </div>
          </div>

          <div class="DetailsAddress">{{userSelectAddress.address}}</div>
        </div>

      </div>

    </div>

    <div class="orderInformation">
      <div class="Information">订单信息</div>

      <div class="Information-item"
           v-for="(item,index) in clearingGoods"
           :key="index">

        <div class="Information-img">
          <img class="auto-img"
               :src="item.small_img"
               alt="">
        </div>

        <div class="CommodityContent">
          <div class="Content">
            <div class="Content-title">
              <div class="Content-cnname">{{item.name}}</div>
              <div class="Content-enname">{{item.enname}}</div>
            </div>
            <div class="Content-spec">{{item.rule}}</div>
          </div>

          <div class="Content-price">
            <div class="price-item">&yen;{{item.price}}</div>
            <div class="price-count">x{{item.count}}</div>
          </div>
        </div>

      </div>

      <div class="order-total">
        <div class="order-count">共计 {{count}}件商品</div>
        <div class="order-money">订单金额：&yen;{{total}}</div>
        <div class="left-circle circle"></div>
        <div class="right-circle circle"></div>
      </div>

    </div>

    <van-popup v-model="show"
               position="bottom"
               closeable>
      <div class="sel-address">
        <div class="sel-address-title">选择地址</div>
        <div>
          <van-address-list v-model="chosenAddressId"
                            :list="list"
                            default-tag-text="默认"
                            @add="addAddress"
                            @edit="onEdit"
                            @select="select">
          </van-address-list>

        </div>
      </div>
    </van-popup>

    <div class="buy-now">
      <van-button round
                  block
                  color="#0C34BA"
                  @click="settlement">立即结算</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Order',
  data () {
    return {
      show: false,
      // 选择地址
      chosenAddressId: '',

      list: [],

      userSelectAddress: {
        tel: '',
        name: '',
        isDefault: false,
        address: ''
      },

      // 结算购物袋商品数据
      clearingGoods: [],

      //购物袋的sid
      sids: [],

      //商品总数量
      count: 0,

      //订单总价
      total: 0
    };
  },

  created () {
    this.sids = this.$route.query.sids.split(/-/);
    this.getclearingGoods()
    this.getAddressUser()
  },

  methods: {

    back () {
      //返回上一级
      this.$router.go(-1);

    },
    // 跳转新增地址
    addAddress () {
      this.$router.push({ name: 'Address' });
    },

    // 修改地址
    onEdit (ele) {
      this.$router.push({
        name: 'Address', query: {
          aid: ele.aid
        }
      })
    },

    // 选择新增地址
    selectAddress () {
      this.show = true;
    },

    // 选择地址
    select (item) {
      for (let key in this.userSelectAddress) {
        this.userSelectAddress[key] = item[key];
      }
      this.show = false
    },
    //获取结算的购物袋商品
    getclearingGoods () {

      this.axios({
        method: 'get',
        url: '/commitShopcart',
        params: {
          sids: JSON.stringify(this.sids)
        }
      }).then(result => {

        if (result.data.code == 50000) {
          let count = 0
          let total = 0;

          result.data.result.forEach(ele => {
            count += ele.count
            total += ele.count * ele.price
          });

          this.clearingGoods = result.data.result
          this.count = count
          this.total = total
        }
      })
    },

    // 获取用户的地址
    getAddressUser () {
      this.axios({
        method: 'get',
        url: '/findAddress'
      }).then(result => {

        if (result.data.code == 20000) {
          result.data.result.forEach(ele => {
            ele.isDefault = Boolean(ele.isDefault);
            ele.address = `${ele.province}${ele.city}${ele.county}${ele.addressDetail}`;

            if (ele.isDefault) {
              this.chosenAddressId = ele.id
              for (let key in this.userSelectAddress) {
                this.userSelectAddress[key] = ele[key]
              }
            }
          })
          this.list = result.data.result;
        }
      })
    },

    // 结算订单
    settlement () {
      if (!this.chosenAddressId) {
        this.$toast('请选择地址')
        return
      }

      this.axios({
        method: 'post',
        url: '/pay',
        data: {
          sids: JSON.stringify(this.sids),
          phone: this.userSelectAddress.tel,
          address: this.userSelectAddress.address,
          receiver: this.userSelectAddress.name
        }

      }).then(result => {
        this.$toast.success(result.data.msg)
        if (result.data.code == 60000) {
          setTimeout(() => {
            this.$router.push({ name: 'MyOrder' })
          }, 1000)
        }

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.order {
  padding-top: 60px;
  padding-bottom: 20px;
  .van-nav-bar {
    position: fixed;
    right: 0;
    left: 0;
    top: 0;
    padding-top: 30px;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    background-color: #0c34ba;
    color: #fff;

    .van-nav-bar-title {
      margin-left: 115px;
      font-size: 16px;
    }
    .van-nav-bar-left {
      font-size: 16px;
    }
  }
  .sel-address {
    padding: 10px;
    .sel-address-title {
      font-size: 16px;
      color: #0c34ba;
      padding-bottom: 20px;
      font-weight: bold;
    }
    .van-button--danger {
      background-color: #0c34ba;
      border-color: #0c34ba;
    }

    .van-tag--danger {
      background-color: #0c34ba;
    }
  }
  .buy-now {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 10px;
    background-color: #fff;
  }
  .max {
    margin: 10px;
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    .address {
      padding: 10px;

      .select-address {
        display: flex;
        align-items: center;
        font-size: 16px;
      }
      .userin-box {
        .userin {
          display: flex;
          align-items: center;
          font-size: 16px;
          margin: 15px 0;

          .username {
            color: #0c34ba;
            margin-right: 15px;
            font-weight: bold;
          }
          .TelephoneNo {
            margin-right: 15px;
          }
          .van-tag {
            background-color: #0c34ba;
            padding: 2px 8px;
          }
        }
      }
    }
  }
  .orderInformation {
    margin: 10px 10px 65px 10px;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    .Information {
      font-size: 18px;
    }
    .Information-item {
      margin-top: 20px;
      align-items: center;
      display: flex;
      .Information-img {
        width: 70px;
        height: 70px;
        margin-right: 10px;
      }
      .CommodityContent {
        width: calc(100% - 80px);
        margin-bottom: 10px;
        &:last-child {
          margin-bottom: 0;
        }
        .Content {
          display: flex;
          .Content-title {
            margin-right: 20px;

            .Content-cnname {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 100px;
            }
            .Content-enname {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 100px;
            }
          }
          .Content-spec {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 100px;
          }
        }
        .Content-price {
          margin-top: 20px;
          display: flex;
          justify-content: space-between;
          .price-item {
            font-size: 17px;
            color: #0c34ba;
            font-weight: bold;
          }
        }
      }
    }
    .order-total {
      margin-top: 20px;
      display: flex;
      font-size: 14px;
      align-items: center;
      padding: 20px 0 10px;
      border-top: 1px dashed #e8e8e8;
      position: relative;
      .order-money {
        color: #e4393c;
        font-weight: bold;
        margin-left: auto;
      }
      .circle {
        position: absolute;
        top: -10px;
        width: 20px;
        height: 20px;
        background-color: #e6e6e6;
        border-radius: 50%;
      }

      .left-circle {
        left: -20px;
      }
      .right-circle {
        right: -20px;
      }
    }
  }
}
</style>